<!--红云超市-->
<template>
  <article class="page mine-page">
    <div class="header">
      <div @click="tools.back()" class="back"><span class="arrow"></span></div>
      <div class="head-bd">{{ mallInfo.name }}</div>
      <div class="message"><div class="head-btn-text"></div></div>
    </div>

    <section class="frame-content-sub no-bg">
      <section class="">
        <div class="screen" v-if="mallInfo.key!= 'ggsxshid'">
          <ul class="screen-menu">
            <li
              v-for="(item, index) in slider"
              @click="go(item, index)"
              :key="index"
              :class="{ active: currentIndex == index }"
            >
              <span>{{ item.title }}</span>
            </li>
          </ul>
        </div>
        <section class="screen-main">
          <div class="d-scroll list-text" style>
            <fetchData
              v-if="isLoading"
              :loading="isLoading"
              :data="swipeData"
            ></fetchData>
            <cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
              @pulling-down="onPullingDown"
            >
              <cube-swipe class="swipe-box">
                <div
                  class="box"
                  v-for="(data, index) in swipeData"
                  :key="index"
                >
                  <div class="item" @click="exchange(data)">
                    <img class="item-img" :src="data.pic" alt="" />
                    <div class="item-info">
                      <span class="left">{{ data.productName }}</span>
                      <!-- <span class="right">适用于{{data.storeName}}</span> -->
                    </div>
<!--                    <p class="tip" v-html="data.storeName"></p>-->
                    <div class="tip" v-if="mallInfo.key!= 'ggsxshid'">
                      <span class="tip-num">{{ data.pointPrice }}</span
                      >积分
<!--                      <span class="right">查看详情</span>-->
                    </div>
                  </div>
                </div>
              </cube-swipe>
              <!-- <div
                class="text-center no-data"
                v-if="!isLoading && swipeData.length === 0"
              >
                <img src="../../../../static/images/no_data.png" alt />
                <p>暂无数据</p>
              </div> -->
              <!-- W noData -->
              <div class="water-logo" v-if="!isLoading && swipeData.length === 0">
                <img src="static/images/dangjian/home/water-logo-comment.png" alt="">
              </div>
              <div class="pdv-10"></div>
              <div class="pdv-10"></div>
            </cube-scroll>
          </div>
        </section>
      </section>
    </section>
  </article>
</template>

<script>
import progressBar from "@/components/common/progressBar.vue";
import supermarketMenu from "@/components/dangjian/mall/supermarketMenu.vue";
import happyShopping from "@/components/dangjian/mall/happyShopping.vue";
import courseExperience from "@/components/dangjian/mall/courseExperience.vue";
import enjoyScenicspot from "@/components/dangjian/mall/enjoyScenicspot.vue";
import supermarketHead from "@/components/dangjian/mall/supermarketHead.vue";
import moment from "moment";
import tools from "@/utils/tools";
import api from "@/common/config/api";

export default {
  components: {
    progressBar,
    supermarketMenu,
    happyShopping,
    supermarketHead,
    courseExperience,
    enjoyScenicspot,
  },
  name: "mallDetail",
  data() {
    return {
      currentIndex: "0",
      isLoading: true,
      options: {
        pullUpLoad: true,
        scrollbar: false,
        pullDownRefresh: {
          threshold: 90,
          stop: 45,
          txt: ' '
        },
      },
      fn: tools,
      pageIndex: 1,
      userInfo: {},
      partyInfo: {},
      sysFile: {},
      todayData: {},
      myIntegrals: {},
      swipeData: [],
      isShow: 0,
      getDict: [],
      slider: [],
      low: "", //积分区间-低
      hight: "", //积分区间-高
      saleOrder:'',
      mallInfo: JSON.parse(sessionStorage.getItem("mallInfo")), //商店详情
    };
  },
  created() {
    this.userInfo = this.$localStorage.get("userInfo");
    let pInfo = this.$localStorage.get("partyInfo");
    if (pInfo) {
      this.partyInfo = pInfo;
    }
    this.saleOrder = 'desc'
    this.myIntegral();
    this.getData();
    // this.isShow = this.menuIndex;
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (to.name === 'mallDetail') {
        to.meta.keepAlive = true
        vm.$store.commit('addRoute', 'mallDetail')
      }
      next()
    })
  },
  beforeRouteLeave(to, from, next) {
    this.$route.meta.keepAlive = to.name === 'mallForRecordDetail'
    if(this.$route.meta.keepAlive) {
      this.$store.commit('addRoute','mallDetail')
    }else {
      this.$store.commit('removeRoute','mallDetail')
      this.$destroy()
    }
    next()
  },
  methods: {
    //点击商品进入详情
    exchange(data) {
      this.$router.push({ path: "mallForRecordDetail" });
      sessionStorage.setItem("commodityInfo", JSON.stringify(data));
    },
    //兑换记录
    exchangeRecord() {
      this.$router.push({ path: "mallForRecordList" });
    },
    go(data, index) {
      this.swipeData = [];
      this.low = data.low;
      this.hight = data.hight;
      data = this.slider[index];
      // if (data.saleOrder == "desc") {
      //   data.saleOrder = "asc";
      //   console.log(data.saleOrder);
      // } else {
      //   data.saleOrder = "desc";
      //   console.log(data.saleOrder);
      // }
      this.saleOrder = data.saleOrder || ''
      console.log(data, index);
      this.pageIndex = 1;
      this.currentIndex = index;
      this.getData();
    },
    //积分详情
    detail() {
      this.$router.push({ path: "scoreDetail" });
    },
    showFun(val) {
      this.isShow = val;
    },

    myIntegral() {
      let data = {
        userId: this.userInfo.id,
      };
      this.fetchService.myIntegral(data.userId).then((res) => {
        if (res.code !== 0) {
          return tools.tip(res.message);
        }
        this.myIntegrals = res.data;
        this.slider = [
          {
            title: "热销",
            low: "",
            hight: "",
            saleOrder: "desc",
          },
          {
            title: "全部",
            low: "",
            hight: "",
          },
          {
            title: "我能兑换",
            low: 0,
            hight: this.myIntegrals.totalScore,
          },
          {
            title: "1-500",
            low: 1,
            hight: 500,
          },
          {
            title: "500-1000",
            low: 500,
            hight: 1000,
          },
          {
            title: "1000以上",
            low: 1000,
            hight: '',
          },
        ];
      });
    },

    getData() {
      this.isLoading = true;
      let parame = {
        pageNo: this.pageIndex,
        pageSize: 20,
        pointPriceEnd: this.hight,
        pointPriceStart:  this.low,
        publishStatus: 0,
        saleOrder: this.saleOrder,
        storeId: this.mallInfo.groupId,
        verifyStatus: 0,
      };
      this.fetchService.mallProductInfoPage(parame).then((res) => {
        this.isLoading = false;
        if (res.code !== 0) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip(res.message);
        }
        if (res.code === 0 && res.data.length < 1) {
          this.options.pullUpLoad = false
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return;
        }
        this.pageIndex++;
        if(this.swipeData.length>0 && !this.isHasFocus(this.swipeData[0].productId,res.data)){
          this.swipeData = this.swipeData.concat(res.data)
        }else{
          this.swipeData = res.data
        }
        // this.swipeData = this.swipeData.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.getData();
    },
    onPullingDown() {
      this.swipeData = []
      this.options.pullUpLoad = true
      console.log('onPullingDown')
      this.pageIndex = 1
      this.getData();
    },
    /*判断是否存在某个值*/
    isHasFocus (userId, list) {
      let ret = false
      list.some(v => {
        if (v.productId === userId) {
          ret = true
          return false
        }
      })
      return ret
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.mine-page {
  /* background: url("../../../static/images/dangjian/mine/bg-mine-hd.png") $bg-color no-repeat center #{pxToRem($head-height)};
    background-size: 100% auto; */
  padding: 0;
  .header {
    justify-content: space-between;
    margin-bottom: pxToRem(0px);
    position: relative;
    .message {
      .head-btn-text {
        font-size: 14PX;
      }
    }
  }
}

.score-hd {
  height: 242px;
  text-align: center;
  background: url("../../../../static/images/dangjian/mine/bg-mine-hd.png")
    $theme-color no-repeat center;
  background-size: 100% auto;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .score-head {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ea7676;

    img {
      height: 100%;
      width: 100%;
    }
  }

  .score-text {
    margin-right: 50px;
    text-align: left;

    .score-tip {
      .score-tip-text {
        vertical-align: super;
        color: #ffffff;
        margin-right: 15px;
      }
    }
    img {
      width: 15px;
      margin-bottom: 5px;
    }
  }

  .score-play {
    width: 171px;
    height: 46px;
    line-height: 46px;
    background: #e20001;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    img {
      width: 25px;
      height: 25px;
      vertical-align: text-top;
      margin-right: 5px;
    }
  }

  .score {
    font-size: 56PX;
    line-height: 1.2em;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    margin-right: 10px;
  }

  .tip {
    font-size: 12PX;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.screen {
  width: 100%;
  height: 108px;
  background: #fff;
  .screen-menu {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    li {
      font-size: 14PX;
      padding: 6px 10px;
      border: 1px solid #e5e5e5;
      border-radius: 10px;
      &.active {
        border: 1px solid #e20002;
        font-weight: bold;
        color: #e20002;
      }
    }
  }
}

.red-car {
  position: relative;
  margin-top: -60px;
  background: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 29px 34px;
  margin-bottom: 0;
  &::after {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    content: "";
    width: pxToRem(16px);
    height: pxToRem(25px);
    background: rgba(199, 199, 204, 1);
    background: url("../../../../static/images/dangjian/dangwu/arrow-left.png")
      no-repeat center;
    background-size: auto 100%;
  }

  .img {
    width: 101px;
    height: 94px;
    margin-right: 32px;
    img {
      @include fullImg();
    }
  }

  .cont {
    .title {
      font-size: 20PX;
      line-height: 1em;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }

    .tip {
      font-size: 18PX;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
  }
}

.goods-list {
  margin: 3% 3% 0;
  .ticketInfo {
    width: 100%;
    height: 165px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .hd {
    .hd-title {
      font-size: 22PX;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
    }

    .tip {
      font-size: 18PX;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 60px;
      span {
        padding-left: 10px;
      }
    }
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 37px 0;
    border-bottom: 1px solid $border-color;
    &:last-child {
      border: none;
    }
    .cont {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .img {
        width: 140px;
        height: 140px;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        text-align: center;
        margin-right: 25px;
        img {
          position: absolute;
          z-index: 2;
          width: 100%;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }
      .title {
        font-size: $titleFontSize;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
      .tip {
        /*font-size: $tipFontSize;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);*/
        margin-top: 0.08rem;
        font-size: 12PX;
        text-align: left;
        color: #999999;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .tip-sub {
        display: flex;
        font-size: $titleFontSize;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        .progress {
          font-size: 0;
        }
      }
    }
    .btn {
      width: 114px;
      height: 60px;
      line-height: 60px;
      background: rgba(242, 242, 242, 1);
      border-radius: 4px;
      font-size: 20PX;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      text-align: center;
      &.btn-red {
        background: rgba(255, 255, 255, 1);
        border: 1px solid $theme-color;
        border-radius: 4px;
        font-size: 20PX;
        font-weight: 400;
        color: $theme-color;
      }
    }
  }
}

.screen-main {
  margin: 3%;
  .swipe-box {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%;
  }
  .box {
    width: 48%;
  }
  .item {
    max-height: 6.8rem;
    min-height: 5.8rem;
    background: #ffffff;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 59, 0.1);
    border-radius: 10px;
    padding: 20px 22px;
    text-align: center;
    margin-bottom: 20px;
    .item-img {
      display: inline-block;
      width: 296px;
      height: 296px;
    }
    .item-info {
      text-align: left;
      .left {
        font-size: 14PX;
        text-align: left;
        height: 1.1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /*display: -ms-flexbox;*/
        /*display: flex;*/
        display: -webkit-box;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-direction: column;
        flex-direction: column;
      }
      .right {
        font-size: 12PX;
        float: right;
        color: #999999;
      }
    }
    .tip {
      font-size: 12PX;
      text-align: left;
      color: #999999;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .tip-num {
        color: #ec0c0c;
        font-size: 14PX;
        margin-right: 10px;
      }

      .right {
        float: right;
        font-size: 12PX;
        width: 110px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #ec0c0c;
        color: #ec0c0c;
        border-radius: 10px;
      }
    }
  }
}
</style>
